<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>HTML5 Workshop - Tools</title>
  <link rel="stylesheet" href="js/jquery.mobile-1.0rc2.min.css" />
  <link rel="stylesheet" href="css/common.css" />
  <!--<link rel="stylesheet" href="css/iphone_weather.css" />-->
  <!--<link rel="stylesheet" href="css/ipad_weather.css" />-->
  <link rel="stylesheet" href="css/ipad_weather_h.css" />
  <!--<link rel="stylesheet" media="only screen and (min-width: 1200px) " href="css/web_weather.css"/>
  <link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="css/iphone_weather.css"/>
  <link rel="stylesheet" media="only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="css/ipad_weather.css"/> 
  <link rel="stylesheet" media="only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="css/ipad_weather_h.css"/>-->
  <script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
  <script type="text/javascript" src="js/UI.js"></script>
  <script type="text/javascript" src="js/jquery.mobile-1.0.js"></script>
	<script>
	addMetaFile();
</script>
</head>

<body>
  <header id="top">
      <div id="logo">logo</div>
      <div id="top_button">
        <span class="toggle_button" id="left_tools_button" style="background-image:url(../image/iphone/phone_topbuttom_bg_hover.png); color:#fff; text-shadow: 0 -1px 1px #758398;">Tolls</span>
        <span class="toggle_button" id="right_games_button">Games</span>
      </div>
      <div id="share">Share weibo</div>
  </header>
  <div id="weather_container">
    <div data-role="page" id="weather_area">
      <div data-role="content" id="content1">
        <!--city_box start-->
        <div id="city_box">
          <div class="left_city">
            <span class="city">北京</span>
            <span class="week">实时天气</span>
          </div>
          <div class="right_search" id="right_searchbox">
            <input id="text_box" type="text" value="请输入城市名字" onfocus="if(this.value=='请输入城市名字'){this.value=''}" onblur="if(this.value==''){this.value='请输入城市名字'}"/>
            <img class="search_icon" id="click_seach" src="image/tools_weather/phone_search_icon.png"/>
          </div>
          <div id="light" class="white_content">
            <div id="search_outbox">
              <input id="text_box1" type="text" value="请输入城市名字" onfocus="if(this.value=='请输入城市名字'){this.value=''}" onblur="if(this.value==''){this.value='请输入城市名字'}" />
              <img class="search_icon1" src="image/tools_weather/phone_search_icon.png"/>
            </div>
          </div>
          <div id="fade" class="black_overlay"></div>
        </div>
        <!--city_box end-->
        
        <!--weather_introduction start-->
        <div id="weather_introduction">
          <div class="weather_icon">
            <img src="image/tools_weather/partly_cloudy.png"/>
          </div>
          <div class="detailed_introduction">
            <div class="left_temperature">
              <p>
                <p class="degree temperature">15</p>
                <p class="deg temperature">&deg;</p>
              </p>
              <div id="temperature_button">
                <a href="#" id="f">&deg;F</a>
                <a href="#" id="c">&deg;C</a>
              </div>
            </div>
            <div class="weather_situation">
              <p class="cloudy">多云</p>
              <ul class="weather_list">
                <li class="text">湿度:95%</li>
                <li class="text wind_direction">风向:西北</li>
                <li class="text wind_velocity">风速:1米/秒</li>
              </ul>
            </div>
          </div>
        </div>
        <!--weather_introduction end-->
        
        <!---->
        <div id="every_week">
          <ul class="weather_one_columns weather_four_columns">
            <li>
              <ul class="weatherIn_one_columns weatherIn_four_columns">
                <li class="weather_font">星期一</li>
                <li class="small_icon"><img src="image/tools_weather/partly_cloudy.png" width="70" height="52"/></li>
                <li class="weather_font weather_condition">多云</li>
                <li class="weather_font air_temperature">14&deg~16&deg</li>
              </ul>
            </li>
            <li>
              <ul class="weatherIn_one_columns weatherIn_four_columns">
                <li class="weather_font">星期二</li>
                <li class="small_icon"><img src="image/tools_weather/partly_cloudy.png" width="70" height="52"/></li>
                <li class="weather_font weather_condition">阴天</li>
                <li class="weather_font air_temperature">14&deg~16&deg</li>
              </ul>
            </li>
            <li>
              <ul class="weatherIn_one_columns weatherIn_four_columns">
                <li class="weather_font">星期三</li>
                <li class="small_icon"><img src="image/tools_weather/partly_cloudy.png" width="70" height="52"/></li>
                <li class="weather_font weather_condition">中雨</li>
                <li class="weather_font air_temperature">14&deg~16&deg</li>
              </ul>
            </li>
            <li>
              <ul class="weatherIn_one_columns weatherIn_four_columns">
                <li class="weather_font">星期四</li>
                <li class="small_icon"><img src="image/tools_weather/partly_cloudy.png" width="70" height="52"/></li>
                <li class="weather_font weather_condition">晴</li>
                <li class="weather_font air_temperature">14&deg~16&deg</li>
              </ul>
            </li>
          </ul>
        </div>
        <!---->
      </div>
		</div>
  </div>
  <footer id="footer">
  </footer>

<script >
$(function(){
    $("#right_games_button").bind('click',function(){
        window.location.href="games.html"; 
    })
});
if(equipment=="phone"){
$(function(){
  $("#click_seach").click(function(){
    document.getElementById('light').style.display='block';
    document.getElementById('fade').style.display='block';
  })
})
}
if(equipment=="pad"){
var g_right_searchbox = document.getElementById('right_searchbox');
  g_right_searchbox.addEventListener('mousemove', function() {
    g_right_searchbox.style.display = 'none';
    g_light.style.right = '-3px';
  }, false);

  var g_light = document.getElementById('light');
  g_light.addEventListener('mouseout', function(e){
    if (!this.contains(e.toElement)) {
      g_right_searchbox.style.display = 'block';
      g_light.style.right = '-296px';
    }
  });
 }

</script>
</body>
</html>
